<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        body{
            background: violet;
        }
        canvas{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: white;
        }
    </style>
</head>
<body>
    <canvas width="800" height="800"></canvas>
    <script>
        var oc=document.querySelector("canvas")

        if(oc.getContext){
            var ctx=oc.getContext("2d")


            // ctx.arc(100,100,10,0,360*Math.PI/180)
            // ctx.fill()
            var arr =[]


            //将数组胡圆绘制到画布上
            setInterval(function(){
                ctx.clearRect(0,0,oc.width,oc.height)

                for(var i=0;i<arr.length;i++){
                    if(arr[i].alp<=0){
                        arr.splice(i,1)
                    }
                    arr[i].r++
                    arr[i].alp-=0.01
                }
                for(var i=0;i<arr.length;i++){
                ctx.save()
                ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+ ")"
                ctx.beginPath()
                ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI)
                ctx.fill()
                ctx.restore()
                }
            },1000/60)
           




            //往arr中注入随机圆胡信息

            setInterval(function(){
                var x=Math.random()*oc.width
                var y=Math.random()*oc.height
                var r=10
                var red=Math.round(Math.random()*255)
                var green=Math.round(Math.random()*255)
                var blue=Math.round(Math.random()*255)
                var alp=1
                arr.push({
                    x:x,
                    y:y,
                    r:r,
                    red,
                    green,
                    blue,
                    alp

                })
            },100)
        }
    </script>
   
</body>
</html>